<template>
  <view class="pagebox">
    <div class="h_user">
      <div class="h_user_t">
        <p class="rpx28 colfff">上次登录: {{userInfo.last_login}}</p>
        <div class="h_wifi">
          <img src="static/s1.png" />
          <p class="rpx22 colfff">{{netWork}}</p>
        </div>
      </div>
      <div class="h_user_info">
        <div class="hu_img">
          <img mode="aspectFill" :src="userInfo.headimg" />
        </div>
        <div class="hu_name">
          <p class="rpx40 col282">{{userInfo.user_name}}</p>
          <div class="hu_phone">
            <img src="static/s2.png" />
            <p class="rpx26 col282">{{userInfo.mobile_phone}}</p>
          </div>
        </div>
      </div>
    </div>
    <navigator class="h_more" @click="togglePopup('center')">
      <p class="rpx28 colDE0000">你有 {{lineWork}} 份离线样本未上传</p>
      <div class="h_rt">
        <img src="static/s3.png" />
      </div>
    </navigator>

    <div class="h_shop">
      <div class="h_shop_m">
        <p class="rpx32 col282">店铺管理</p>
        <navigator url="shop" class="h_shop_rt">
          <p class="rpx26 col878">全部店铺</p>
          <img src="static/s3.png" />
        </navigator>
      </div>
      <div class="h_shop_it_box">
        <navigator :url="'shop_info?id='+item.shop_id"  class="h_shop_it" v-for="(item,index) in allShop" :key="index">
          <p class="rpx30 col666">{{item.shop_id}}</p>
          <div class="h_shop_name">
            <text class="hs_n omit1 rpx28 col666">{{item.shop_name}}</text>
            <p class="rpx26 col999">{{item.add_time.slice(5,10)}}</p>
          </div>
        </navigator>
      </div>
      <navigator url="shop" class="hs_more rpx28 col666">查看更多</navigator>
    </div>

    <uni-popup
      class="u_p"
      :show="type === 'center'"
      position="middle"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="show_lx">
        <img class="lx_img" src="static/s4.png" @click="togglePopup('')"/>
        <p class="lx_title rpx34 col030">离线文档</p>
        <p class="lx_msg rpx28 col030">你有{{lineWork}}份离线样本未上传,请确认上传</p>
        <div class="lx_but">
          <navigator url="lixian" class="rpx34 col666">离线列表</navigator>
          <navigator class="rpx34 col4E97F3">确认上传</navigator>
        </div>
      </div>
    </uni-popup>
    <!-- <ntfy v-show="netWork == '无网络'&&show == true" @close="close"></ntfy> -->
  </view>
</template>

<script>
import mixins from "@/mixins";
import ntfy from "../../components/ntfy/index.vue";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
import api from "@/mixins/api";
import { mapState, mapMutations } from "vuex";
export default {
  // mixins: [mixins],
  components: { ntfy, uniPopup },
  data() {
    return {
      type: "type",
      userInfo: null,
      allShop: null,
      netWork: "",
      show: true,
      lineWork:0
    };
  },
  onBackPress() {
    if (this.type !== "") {
      this.type = "";
      return true;
    }
  },
  onLoad(e) {
    let _that = this;
    //获取网络信息
    uni.getNetworkType({
      success: function(res) {
        if (res.networkType == "unknown" || res.networkType == "none") {
          _that.netWork = "无网络";
          _that.show = true;
        } else {
          _that.netWork = res.networkType;
        }
      }
    });
    uni.onNetworkStatusChange(function(res) {
      if (res.networkType == "unknown" || res.networkType == "none") {
        _that.netWork = "无网络";
        _that.show = true;
      } else {
        _that.netWork = res.networkType;
      }
    });
    //以下控制有无数据更新，有就更新，没就拿缓存的
    uni.getStorage({
      key: "userInfo",
      success: res => {
        _that.userInfo = res.data;
      }
    })
    uni.getStorage({
      key: "store-code",
      success: res => {
        judgeSUpdate(res.data);//缓存有,不是第一次用了
      },
      fail: res => {
        initSUpdateDate(10001); //第一次用应用
      }
    });
    uni.getStorage({
      key: "question-code",
      success: res => {
        judgeQUpdate(res.data);//缓存有,不是第一次用了
      },
      fail: res => {
        initQUpdateDate(10001); //第一次用应用
      }
    });
    //第一次初始化数据有没更新
    function initSUpdateDate(code) {
      //店铺接口请求
      api.updateDate(code, 1, function(res) {
        uni.setStorage({
          key: "store-code",
          data: res.data.data.code
        });
        getAS(_that.userInfo.user_id) //店铺数据
      })
    }
    function initQUpdateDate(code) {
      //问卷接口请求
      api.updateDate(code, 2, function(res) {
        uni.setStorage({
          key: "question-code",
          data: res.data.data.code
        });
      });
      getQuesionts() //问卷数据
    }
    
    function judgeSUpdate(data) {
      api.updateDate(data, 1, function(res) {
        if (res.data.message == "OK") { //有更新
          _that.setStoreUpdate(res.data.data.type);
          uni.setStorage({
            key: "store-code",
            data: res.data.data.code
          });
          getAS(_that.userInfo.user_id) //店铺数据
        } else {
          _that.setStoreUpdate(0);
          uni.getStorage({
            key:'allShop',
            success:res =>{
              _that.allShop = res.data
              getLineWork();
            }
          })
        }
      });
    }
    function judgeQUpdate(data) {
      api.updateDate(data, 2, function(res) {
        if (res.data.message == "OK") {//有更新
          _that.setProblemUpdate(res.data.data.type);
          uni.setStorage({
            key: "question-code",
            data: res.data.data.code
          });
          getQuesionts() //问卷数据
        } else {
          _that.setProblemUpdate(0);
        }
      });
    }
    //获取店铺信息
    function getAS(id) {
      api.getAllShop(id, 1, 10, function(res) {
        _that.allShop = res.data.data.item;
        getLineWork();
        uni.setStorage({
          key: "allShop",
          data: res.data.data.item
        });
      });
    }
    //获取问卷信息
    function getQuesionts() {
      api.getQuesionts(-1, 1, 30, function(res) {
        uni.setStorage({
          key: "question",
          data: res.data.data
        });
      });
    }
    //获取离线文件数量
    function getLineWork(){
      _that.allShop.forEach(element => {
        let id = element.shop_id;
        uni.getStorage({
          key:'shopId-'+id,
          success:res=>{
            _that.lineWork++
          }
        })
      });
    }
  },
  computed: {
    ...mapState(["storeUpdate"]),
    ...mapState(["problemUpdate"])
  },
  methods: {
    ...mapMutations(["setStoreUpdate"]),
    ...mapMutations(["setProblemUpdate"]),
    togglePopup(type) {
      this.type = type;
    },
    close() {
      this.show = false;
    }
  }
};
</script>

<style scoped>
.h_user {
  height: 346upx;
  background: red;
}
.h_user_t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32upx;
  margin: 0 50upx 20upx 40upx;
  padding-top: 60upx;
}
.h_wifi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h_wifi img {
  width: 32upx;
  height: 32upx;
  margin-right: 14upx;
}
.h_user_info {
  margin: 0 32upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 220upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 8upx 20upx 0px rgba(112, 2, 9, 0.08);
  border-radius: 4upx;
}
.hu_img {
  margin-left: 54upx;
  width: 116upx;
  height: 116upx;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 12upx solid #e0e7ee;
}
.hu_img img,
.hu_img image {
  max-width: 116upx;
  max-height: 116upx;
}
.hu_name {
  width: 460upx;
  height: 116upx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hu_name > p {
  width: 440upx;
  height: 40upx;
  line-height: 40upx;
}
.hu_phone {
  height: 30upx;
  display: flex;
  align-items: center;
}
.hu_phone img {
  width: 24upx;
  height: 24upx;
  display: block;
  margin-right: 15upx;
}

.h_more {
  margin: 0 24upx 25upx;
  height: 90upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 8upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.h_more p {
  margin-left: 44upx;
}
.h_rt {
  width: 40upx;
  height: 40upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8upx;
}
.h_rt img {
  display: block;
  width: 24upx;
  height: 24upx;
}

.h_shop {
  margin: 0 24upx 128upx;
  background: #fff;
  border-radius: 8upx;
}
.h_shop_m {
  height: 88upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 16upx;
  border-bottom: 1px solid #e5e5e5;
}
.h_shop_m > p {
  margin-left: 23upx;
}
.h_shop_rt {
  height: 40upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 27upx;
}
.h_shop_rt p {
  margin-right: 18upx;
}
.h_shop_rt img {
  display: block;
  width: 24upx;
  height: 24upx;
}

.h_shop_it_box {
  padding: 25upx 0;
}
.h_shop_it {
  padding: 25upx 40upx 25upx 30upx;
}
.h_shop_it p {
  height: 30upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h_shop_it > p {
  margin-bottom: 20upx;
}
.h_shop_name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.h_shop_name .hs_n {
  max-width: 470upx;
}
.hs_more {
  margin: 0 8upx;
  height: 80upx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e5e5;
}

.u_p >>> .uni-popup {
  height: unset !important;
  border-radius: 8upx;
  padding: 0;
}
.show_bg {
  position: fixed;
  overflow: hidden;
  z-index: 332;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.show_lx {
  z-index: 333;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 540upx;
  height: 324upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 8upx;
}
.lx_title,
.lx_msg,
.lx_but {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.lx_title {
  margin-top: 58upx;
  height: 34upx;
  line-height: 34upx;
}
.lx_msg {
  width: 314upx;
  text-align: center;
  line-height: 37upx;
  margin-top: 36upx;
}
.lx_but {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #9ea6b7;
  height: 88upx;
}
.lx_but navigator {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 88upx;
}
.lx_but navigator:first-child {
  border-right: 1px solid #9ea6b7;
  box-sizing: border-box;
}
.lx_img {
  position: absolute;
  top: -62upx;
  right: -15upx;
  width: 50upx;
  height: 50upx;
}
</style>
